<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户总数" :total="data.memberTotal | NumberFormat">
          <a-tooltip title="" slot="action" @click="goPage('/ums')">
            <a-icon type="right-circle" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="data.memberAreaData"/>
          </div>
          <template slot="footer">今日新增用户：<span>{{ data.currMemberTotal }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="健康动态数" :total="data.dynamicTotal | NumberFormat">
          <a-tooltip title="" slot="action" @click="goPage('/ums/dynamic')">
            <a-icon type="right-circle" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="data.dynamicAreaData"/>
          </div>
          <template slot="footer">今日动态数：<span>{{ data.currDynamicTotal }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="健康问答数" :total="data.qaTotal | NumberFormat">
          <a-tooltip title="" slot="action" @click="goPage('/ums/qa')">
            <a-icon type="right-circle" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="data.qaAreaData"/>
          </div>
          <template slot="footer">今日问答数：<span>{{ data.currQaTotal }}</span></template>
        </chart-card>
      </a-col>

    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">

        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" @change="handleChangeTabs">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="getMemberData(queryParam.period='day')">今日</a>
              <a @click="getMemberData(queryParam.period='week')">本周</a>
              <a @click="getMemberData(queryParam.period='month')">本月</a>
            </div>
            <a-range-picker @change="onDateChange" :style="{width: '256px'}"/>
          </div>

          <a-tab-pane  tab="用户数" key="1" :forceRender="true">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="用户增长情况" :dataSource="memberData" yaxisText="用户数"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
                  <div class="item-group">
                    <a-row>
                      <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList"
                             :key=" 'registerType'+index ">
                        <a-card :bordered="false">
                          <a-card-meta :title="item.number+''">
                            <template slot="description">
                              <a style="width: 100%" @click="goPage(item.path)">{{item.text}}</a>
                            </template>
                          </a-card-meta>
                        </a-card>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane  tab="用户活跃" key="2" :forceRender="true">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="用户活跃情况" :dataSource="memberData" yaxisText="活跃用户数"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
                  <div class="item-group">
                    <a-row>
                      <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList"
                             :key=" 'registerType'+index ">
                        <a-card :bordered="false">
                          <a-card-meta :title="item.number+''">
                            <template slot="description">
                              <a style="width: 100%" @click="goPage(item.path)">{{item.text}}</a>
                            </template>
                          </a-card-meta>
                        </a-card>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>


        </a-tabs>

      </div>
    </a-card>


    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="内容数据统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="8">
              <head-info title="文章数" :content="data.contentTotal|NumberFormat"></head-info>
            </a-col>
           <!-- <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="book" style="font-size: 24px"  />
              </a-spin>
            </a-col>-->
            <a-col :span="8">
              <head-info title="视频数" :content="data.videoTotal|NumberFormat"></head-info>
            </a-col>
          <!--  <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="video-camera" style="font-size: 24px"  />
              </a-spin>
            </a-col>-->
            <a-col :span="8">
              <head-info title="健康课堂数" :content="data.courseTotal|NumberFormat"></head-info>
            </a-col>
           <!-- <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="notification" style="font-size: 24px"  />
              </a-spin>
            </a-col>-->
          </a-row>

        </a-card>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="平台数据统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="8">
              <head-info title="整体医学报告数" :content="data.f112Count|NumberFormat"></head-info>
            </a-col>
            <a-col :span="8">
              <head-info title="中医体质报告数" :content="data.f113Count|NumberFormat"></head-info>
            </a-col>
            <a-col :span="8">
              <head-info title="营养饮食报告数" :content="data.f118Count|NumberFormat"></head-info>
            </a-col>

          </a-row>
          <a-divider ></a-divider>
          <a-row>
            <a-col :span="8">
              <head-info title="运动康复报告数" :content="data.f119Count|NumberFormat"></head-info>
            </a-col>
            <a-col :span="8">
              <head-info title="体能健身报告数" :content="data.f120Count|NumberFormat"></head-info>
            </a-col>
            <a-col :span="8">
              <head-info title="皮肤管理报告数" :content="data.f121Count|NumberFormat"></head-info>
            </a-col>
          </a-row>

          <a-divider ></a-divider>
          <a-row>
            <a-col :span="8">
              <head-info title="体检检测报告数" :content="data.f111Count|NumberFormat"></head-info>
            </a-col>
            <a-col :span="8">
              <head-info title="整体医学检测报告数" :content="data.f110Count|NumberFormat"></head-info>
            </a-col>
            <a-col :span="8">
              <head-info title="身体成分检测报告数" :content="data.f19Count|NumberFormat"></head-info>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
  import Bar from '@/components/chart/Bar'
  import ACol from 'ant-design-vue/es/grid/Col'
  import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  import ChartCard from '@/components/ChartCard'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniArea from '@/components/chart/MiniArea'
  import IndexBar from '@/components/chart/IndexBar'
  import BarMultid from '@/components/chart/BarMultid'
  import DashChartDemo from '@/components/chart/DashChartDemo'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import { getAction, postAction } from '@api/manage'
  import ARow from 'ant-design-vue/es/grid/Row'

  export default {
    name: 'IndexBdc',
    components: {
      ARow,
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      DashChartDemo,
      BarMultid,
      IndexBar,
      Bar,
      HeadInfo
    },
    data() {
      return {
        data:{},
        contentCount:"100",
        memberData: [],
        loading: false,
        queryParam: {
          period: 'month',
          tableName:"ums_member"
        },
        registerTypeList: [{ text: '已完善个人信息用户',path:"/ums?isComplete=1" }, { text: '已完成健康报告用户',path:"/ums?mrStatus=2" }, { text: '健康报告进行中用户',path:"/ums?mrStatus=1" }]
      }
    },
    methods: {
      handleChangeTabs(key){
        if(key==="1"){
          this.queryParam.tableName="ums_member"
        }
        if(key==="2"){
          this.queryParam.tableName="ums_member_login_log"
        }
        this.getMemberData();
      },
      goPage(path){
        this.$router.push({
          path:path
        });
      },
      getMiniAreaData() {
        getAction('/sys/index/getMiniAreaData').then(res => {
          if (res.success) {
            this.data=res.result
            this.registerTypeList[0].number=this.data.memberCompleteTotal
            this.registerTypeList[1].number=this.data.memberMrStatus1Total
            this.registerTypeList[2].number=this.data.memberMrStatus2Total
            this.$forceUpdate()

          } else {
            this.$message.warning(res.message)
          }
        })
      },
      onDateChange(value, dateString) {
        this.queryParam.beginDate = dateString[0]
        this.queryParam.endDate = dateString[1]
        this.getMemberData()
      },
      getFlowRateNumber(value) {
        return Number(value)
      },
      getMemberData() {
       // this.loading = true
        postAction('/sys/index/getBarData', this.queryParam).then(res => {
          if (res.success) {
            this.memberData = res.result
            //this.loading = false
            this.queryParam.beginDate = undefined
            this.queryParam.endDate = undefined
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    },
    created() {
      this.getMemberData()
      this.getMiniAreaData()
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }
  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;
    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .item-group {
    .more-btn {
      margin-bottom: 13px;
      text-align: center;
    }
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
  }

  @media only screen and (min-width: 1600px) {
    .list-content-item {
      margin-left: 60px;
    }
  }

  @media only screen and (max-width: 1300px) {
    .list-content-item {
      margin-left: 20px;
    }

    .width-hidden4 {
      display: none
    }
  }

  .list-content-item {
    span {
      line-height: 20px;
    }
  }

  .list-content-item {
    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }

  .anty-list-cust {
    .ant-list-item-meta {
      flex: 0.3 !important;
    }
  }

  .anty-list-cust {
    .ant-list-item-content {
      flex: 1 !important;
      justify-content: flex-start !important;
      margin-left: 20px;
    }
  }


</style>